<template>
  <view class="container">
    <custom-navbar :immersive="true" title="订单结算"> </custom-navbar>
    <view class="container_header" :style="{ paddingTop: `${navbarHeight}px` }"> </view>
    <scroll-view class="container_scroll" scroll-y="true" >
      <view class="container_content">
        <view class="order-bg">
          <view class="container_content_warehouse">
            <view class="container_content_warehouse_left" @click="goWarehouse">
              <view class="container_content_warehouse_left_top">
                <view class="container_content_warehouse_left_top_label">自提点</view>
                <view class="container_content_warehouse_left_top_name">{{ warehouseInfo.name }}</view>
                <uni-icons type="right" size="18" />
              </view>
              <view class="container_content_warehouse_left_address">
                {{ warehouseInfo.address }}
              </view>
            </view>
            <view class="container_content_warehouse_right" @click="goNavi">
              <view>{{ warehouseInfo.distance ? warehouseInfo.distance.toFixed(2) : '' }}km</view>
              <uni-icons type="location-filled" size="20" color="#26BB55" />
            </view>
          </view>
          <view class="container_content_deliver">
            <view class="container_content_deliver_row" @click="">
              <view class="container_content_deliver_row_left">配送日期</view>
              <date-picker class="container_content_deliver_row_right" v-model="deliverDate" type="date" placeholder="请选择配送时间" @change="handleDateTimeChange" :minDate="deliverMinDate" :maxDate="deliverMaxDate" />

              <uni-icons type="right" size="18" />
            </view>
            <view class="container_content_deliver_row">
              <view class="container_content_deliver_row_left">配送时间段</view>
              <view class="container_content_deliver_row_right">
                <picker mode="selector" :range="deliverTimeList" @change="changeExpiration" range-key="name">
                  <view>{{ deliverTime ? deliverTime : '请选择' }}</view>
                </picker>
              </view>

              <uni-icons type="right" size="18" />
            </view>
          </view>
        </view>

        <view class="container_content_line"></view>
        <view class="order-bg">
          <view class="container_content_title"><image src="/static/image/payment_icon_1.png" mode="widthFix" /></view>

          <view class="container_content_item" v-for="(item, index) in cartList" :key="index">
            <view class="container_content_item_pic">
              <image :src="item.mainImage ? item.mainImage : ' https://www.zjjqf.cn/file/static/undefined.png'" mode="aspectFill" />
            </view>
            <view class="container_content_item_title">{{ item.goodsName }}</view>
            <view class="container_content_item_right">
              <itemPrice :price="item.taxPrice"></itemPrice>
              <view class="container_content_item_right_num">共{{ item.goodsCount }}件</view>
            </view>
          </view>
        </view>

        <view class="container_content_line"></view>
        <view class="order-bg">
          <view class="container_content_title"><image src="/static/image/payment_icon_2.png" mode="widthFix" /></view>
          <view class="container_content_coupon">
            <view class="container_content_coupon_left">
              <image src="/static/image/payment_icon_coupon.png" mode="widthFix" />
              <view>优惠券</view>
            </view>
            <view class="container_content_coupon_right" @click="goCoupon">
              <view v-if="currentCoupon.id"> -{{ currentCoupon.deductAmount }}</view>
              <view v-else>有{{ couponCount }}张优惠券</view>

              <uni-icons type="right" color="" size="20" />
            </view>
          </view>
        </view>
        <view class="container_content_line"></view>
        <view class="order-bg">
          <view class="container_content_title"><image src="/static/image/payment_icon_3.png" mode="widthFix" /></view>
          <view class="container_content_info">
            <view class="container_content_info_row">
              <image src="/static/image/payment_icon_user.png" mode="widthFix" />
              <view class="container_content_info_row_label">联系人</view>
              <input class="container_content_info_row_input" type="text" v-model="account" placeholder="请输入联系人" />
            </view>
            <view class="line" style="margin: 20rpx 0"></view>
            <view class="container_content_info_row" style="margin-top: 20rpx">
              <image src="/static/image/payment_icon_phone.png" mode="widthFix" />
              <view class="container_content_info_row_label">联系电话 </view>
              <input class="container_content_info_row_input" type="text" v-model="phone" placeholder="请输入联系电话" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="container_bottom">
      <view class="container_bottom_left">
        <view class="container_bottom_left_discount">
          <view class="container_bottom_left_discount_label">实付</view>
          <itemPrice :price="getAmount"></itemPrice>
          <view class="container_bottom_left_discount_original">￥{{ getOriginalAmount }}</view>
        </view>
        <view class="container_bottom_left_discount_des"> 总计优惠￥{{ currentCoupon.deductAmount ? currentCoupon.deductAmount : 0 }} </view>
      </view>
      <button class="container_bottom_btn" @click="checkShowDialog">立即支付</button>
    </view>
    <uni-popup ref="popup" type="center" border-radius="10px" class="container_pop" :mask-click="false">
      <view class="container_pop_content">
        <image class="container_pop_content_close" src="/static/image/close.png" mode="widthFix" @click="closeDialog" />
        <view class="container_pop_content_label">当前自提点</view>
        <view class="container_pop_content_name text-green">{{ warehouseInfo.name }}</view>
        <view class="container_pop_content_distance"
          >距您约 <text class="text-green">{{ warehouseInfo.distance ? warehouseInfo.distance.toFixed(2) : '' }}公里</text>,确认订单后将无法更改
        </view>
        <view class="container_pop_content_button">
          <button class="container_pop_content_button_left" @click="changeWare">更换自提点</button>
          <button class="container_pop_content_button_right" @tap="goPay">确认支付</button>
        </view>
        <view class="container_pop_content_tip" @click="saveHideDialog">
          <view class="checkbox" :class="check ? 'selected' : ''">
            <uni-icons class="selected-icon" type="checkmarkempty" size="28rpx" color="white"></uni-icons>
          </view>
          <view>不再提醒</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="payPopup" type="bottom" border-radius="10px" class="container_pop" :mask-click="false">
      <view class="container_pay-pop">
        <image class="container_pay-pop_close" src="/static/image/close.png" mode="widthFix" @click="closePayDialog" />
        <view class="container_pay-pop_title"> 社发配送 </view>
        <view class="container_pay-pop_price">
          <text class="container_pay-pop_price_label">￥</text>
          <text>{{ getAmount }}</text>
        </view>
        <view class="line"></view>
        <view class="container_pay-pop_label">付款方式</view>
        <view class="container_pay-pop_row" v-for="(item, index) in payList" :key="index" :class="index === payList.length - 1 ? 'border_none' : ''" @click="handleTriggerSelect(index)">
          <image :src="item.icon" mode="widthFix" />
          <view class="container_pay-pop_row_title">{{ item.name }}</view>
          <view class="pay_checkbox" :class="item.selected ? 'selected' : ''">
            <uni-icons class="selected-icon" v-if="item.selected" type="checkmarkempty" size="28rpx" color="white"></uni-icons>
          </view>
        </view>
        <button class="container_pay-pop_btn" type="primary" @click="onSubmitGoods">支付</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { debounce, getScreen, getUserInfo, getOpenId, curDate } from '@/service/auth'

import proxyGoods from '@/utils/proxyGoods.js'
import navbarMixin from '@/mxins/navbar.js'
import itemPrice from '@/components/itemPrice'
import { customerCollectCouponList } from '@/service/api/home'
import { nbPay } from '@/service/api/pay'
import { addOrSave, addOrSaves, appletSalesOrderAddOrSave, getNearbyWarehouse, deliveryTimeList } from '../../service/api/shopping'
import { mapState, mapGetters, mapMutations } from 'vuex'
import DateUtils from '@/utils/DateUtils.js'
import DatePicker from '@/components/date-picker/date-picker.vue'
export default {
  name: 'shopping',
  mixins: [navbarMixin],
  components: { itemPrice, DatePicker },
  data() {
    return {
      customerId: null,
      params: {},
      warehouseInfo: {},
      cartList: [],
      account: '',
      phone: '',
      couponCount: 0,
      salePrice: 0,

      customerCouponList: [],
      currentCoupon: {},
      check: false,
      payList: [
        { name: '市民卡支付', selected: true, icon: require('@/static/image/pay_citizen_icon.png'), payType: 'citizenCard' },
        // { name: '银联卡支付', selected: false, icon: require('@/static/image/pay_yl_icon.png'), payType: 'nb' },
      ],
      deliverDate: '', //时间晚于12点只能选择明天
      deliverTime: '',
      sendTimeId: '',
      deliverTimeList: '',
      deliverMinDate: '',
      deliverMaxDate: '',
      contentHeight: '',
    }
  },
  created() {
    const { width, height } = getScreen()
    const app = getApp()
    // this.contentHeight = height - this.navbarHeight

    const data = getUserInfo()
    this.user = JSON.parse(data)
    if (this.user) {
      this.customerId = this.user.customerIds
      this.account = this.user.userName
      this.phone = this.user.phone
    }
    const isAfterNoon = DateUtils.isAfterHour()
    console.log('isAfterNoon', isAfterNoon)

    this.deliverMinDate = isAfterNoon ? DateUtils.getFormattedNextDay() : DateUtils.getFormattedTodayDay()
    this.deliverMaxDate = DateUtils.getFormattedNextDay()
  },
  computed: {
    getAmount() {
      let val = this.cartList.reduce((prev, cur) => prev + Number(cur.taxPrice * cur.goodsCount), 0)
      val = val - (this.currentCoupon.type === 1 ? this.currentCoupon.deductAmount || 0 : 0)
      return val.toFixed(2)
    },
    getOriginalAmount() {
      let val = this.cartList.reduce((prev, cur) => prev + Number(cur.taxPrice * cur.goodsCount), 0)
      return val.toFixed(2)
    },
  },
  onLoad(option) {
    try {
      const ware = uni.getStorageSync('wareInfo')
      const list = uni.getStorageSync('cartList')

      if (ware) {
        this.warehouseInfo = ware
        console.log('自提点信息:', ware)
      } else {
        console.log('无自提点信息')
      }
      if (list) {
        this.cartList = list
        console.log('购物车:', list)
      }
    } catch (e) {
      console.error('读取存储失败:', e)
    }
    this.getCustomerCollectCouponList()
    this.getDeliveryTime()
  },
  onShow() {
    const app = getApp()
  },
  mounted() {},
  watch: {},

  methods: {
    ...mapMutations('cart', ['clearCartSelected']),
    clearStorageData() {
      uni.removeStorageSync('wareInfo')
      uni.removeStorageSync('cartList')
    },
    getCustomerCollectCouponList() {
      customerCollectCouponList({ customerId: this.customerId }).then(res => {
        // this.couponCount = res.data.content.length
        this.customerCouponList = res.data.content
        console.log('customerCouponList', this.customerCouponList)
        this.judgeCoupon()
      })
    },
    goCoupon() {
      const _that = this
      if (!this.customerCouponList) {
        _that.uniShowToast('暂无优惠券')
        return
      }
      uni.navigateTo({
        url: `/pageShopping/coupon/receivedList?fromSettle=true&couponList=` + encodeURIComponent(JSON.stringify(this.customerCouponList)),
        events: {
          // 选择自提点，返回选中的自提点

          acceptDataFromOpenedPage: function (data) {
            console.log('back', data)
            if (data) {
              _that.currentCoupon = data
              console.log('currentCoupon', _that.currentCoupon.deductAmount)
            }
          },
        },
      })
    },
    judgeCoupon() {
      const date = curDate()
      this.customerCouponList.forEach(item => {
        ////判断时间是否符合
        if (Date.parse(item.startDate) > Date.parse(date) || Date.parse(item.endDate) < Date.parse(date)) {
          item.isSatisfy = false
          item.errorMessage = '该优惠券不在使用时间'
          return
        }

        let amount = 0
        let meetWith = true
        console.log('是否是单品券', item.isSingleGoods)
        //判断是否单品 抵扣券
        if (!item.isSingleGoods) {
          console.log('isSingleGoods', item.isSingleGoods)
          //过滤出符合条件的商品
          if (item.goodsBrandIds || item.goodsTypeIds || item.goodsIds) {
            const goodsBrandList = item.goodsBrandList && item.goodsBrandList.length && item.goodsBrandList.map(item => item.goodsBrandId)

            const goodsTypeList = item.goodsTypeList && item.goodsTypeList.length && item.goodsTypeList.map(item => item.goodsTypeId)

            const goodsList = item.goodsList && item.goodsList.length && item.goodsList.map(item => item.goodsId)
            //判断是否包含
            meetWith = this.cartList.some(val => {
              return goodsBrandList ? goodsBrandList.includes(val.goodsBrandId) : true && goodsTypeList ? goodsTypeList.includes(val.goodsTypeId) : true && goodsList ? goodsList.includes(val.goodsId) : true
            })

            amount = this.cartList
              .reduce((pre, cur) => {
                return Number(cur.taxPrice * cur.goodsCount) + pre
              }, 0)
              .toFixed(2)

            //如果包含则判断整单金额
          } else {
            amount = this.cartList
              .reduce((pre, cur) => {
                return Number(cur.taxPrice * cur.goodsCount) + pre
              }, 0)
              .toFixed(2)
          }
        } else {
          console.log('goodsList', item.goodsList)
          if (!item.goodsList || !item.goodsList[0]) {
            item.isSatisfy = false
            item.errorMessage = '该优惠券未设置商品'
            return
          }
          amount = this.cartList
            .filter(val => val.goodsId === item.goodsList[0].goodsId)
            .reduce((pre, cur) => {
              return Number(cur.taxPrice * cur.goodsCount) + pre
            }, 0)
            .toFixed(2)
        }
        console.log('meetWith', meetWith)
        console.log('amount', amount)
        console.log('effectAmount', item.effectAmount)
        //判断金额是否满足,
        if (meetWith && amount >= item.effectAmount) {
          item.isSatisfy = true
        } else {
          item.isSatisfy = false
          item.errorMessage = '金额不满足优惠券条件'
        }
        console.log('item', item)
      })

      this.customerCouponList.sort((a, b) => b.isSatisfy - a.isSatisfy)
      console.log('customerCouponList', this.customerCouponList)
      const successList = this.customerCouponList.filter(val => val.isSatisfy)
      console.log('successList', successList)
      if (successList.length) {
        this.couponCount = successList.length
        this.currentCoupon = successList.reduce((prev, cur) => {
          if (cur.deductAmount > prev.deductAmount) {
            return cur
          }
          return prev
        }, successList[0])
      } else {
        this.currentCoupon = { id: null }
      }

      console.log('currentCoupon', this.currentCoupon)
    },
    onSubmitGoods() {
      const _that = this
      if (_that.check) {
        uni.setStorageSync('warehouse', '1')
      }
      // 1.若无数据则不允许提交  先下单接口，返回之后调用支付接口，再调用微信支付

      if (!_that.cartList.length) {
        if (_that.isShowDialog) _that.uniShowToast('请选择商品后再提交')
        return
      }
      const payItem = _that.payList.find(item => item.selected)
      if (payItem) {
        this.payType = payItem.payType
      } else {
        return this.uniShowToast('请选择付款方式')
      }

      const data = {
        customerId: this.customerId,
        detailList: [...this.cartList],
        contactName: this.account,
        contactPhone: this.phone,
        payType: this.payType,
        warehouseId: this.warehouseInfo.id,
        type: '1', //1销售单 2退货单
        sendDate: this.deliverDate,
        sendTimeId: this.sendTimeId,
        sendTime: this.deliverTime,
      }

      data.openid = getOpenId(this.user.companyCode)
      data.customerCouponIds = this.currentCoupon.id

      this.uniShowLoading()

      if (!this.order) {
        addOrSave(data)
          .then(async res => {
            this.uniHideLoading()
            const { data, msg, status } = res
            // console.log('data' + JSON.stringify(data.data))
            if (status === 200) {
              //返回
              _that.uniShowToast('下单成功')
              _that.$store.commit('clearCartSelected')
            } else {
              this.uniShowToast({
                title: msg,
                icon: 'none',
              })
            }

            if (this.payType === 'nb') {
              const data1 = {
                ...data.data,
                // package: data.packageValue,
                success: function (res) {
                  console.log('success res', res)
                  _that.uniShowToast('付款成功')
                  // uni.redirectTo({url:`/pageShopping/home/index?order=${this.order}`})
                  _that.sumber()
                  // 清空购物车
                  _that.cartList.length = 0
                },
                fail: function (res) {
                  console.log('fail res', res)
                  // uni.redirectTo({url:`/pageShopping/home/index?order=${this.order}`})
                  _that.sumber()
                  _that.uniShowToast('付款失败,已生成订单请进入我的订单支付')
                  // 清空购物车
                  _that.cartList.length = 0
                },
              }
              wx.requestPayment(data1)
            } else {
              _that.cartList.length = 0
              _that.sumber()
            }
          })
          .catch(err => {
            console.log('err', err)
            if (err.msg && err.msg.includes('实名')) {
              uni.showModal({
                title: '提示',
                content: err.msg,
                success: function (res) {
                  if (res.confirm) {
                    _that.closePayDialog()
                    _that.goCitizenCard()
                  }
                },
              })
            } else if (err.msg && err.msg.includes('绑定市民卡')) {
              uni.showModal({
                title: '提示',
                content: err.msg,
                success: function (res) {
                  if (res.confirm) {
                    _that.closePayDialog()
                    uni.navigateTo({
                      url: '/pageShopping/citizen/index',
                    })
                  }
                },
              })
            } else {
              uni.showModal({ title: '提示', content: err.msg })
            }

            this.uniHideLoading()
          })
      }
    },
    goCitizenCard() {
      console.log('user', this.user.userId)
      this.goCitizen(this.user.userId)
    },
    goWarehouse() {
      const _that = this
      uni.navigateTo({
        url: '/pageShopping/warehouse/index',
        events: {
          // 选择自提点，返回选中的自提点

          acceptDataFromOpenedPage: function (data) {
            console.log('back', data)
            if (data) {
              _that.warehouseInfo = data
            }
          },
        },
      })
    },
    sumber() {
      this.clearStorageData()
      uni.switchTab({
        url: '/pages/mine/order/index',
      })
      uni.navigateBack({ delta: 1 })
    },
    saveHideDialog(item) {
      //购物车选择
      this.check = !this.check
    },
    changeWare() {
      this.$refs.popup.close()
      this.goWarehouse()
    },
    closeDialog() {
      this.$refs.popup.close()
    },
    goPay() {
      this.$refs.popup.close()
      this.showPayDialog()
    },
    checkShowDialog() {
      if (!this.deliverDate) {
        this.uniShowToast('请选择配送日期')
        return
      }
      const showDialog = uni.getStorageSync('warehouse')
      if (showDialog) {
        this.showPayDialog()
      } else {
        this.$refs.popup.open()
      }
    },
    showPayDialog() {
      this.$refs.payPopup.open()
    },
    closePayDialog() {
      this.$refs.payPopup.close()
    },
    goNavi() {
      // 跳转到内置地图查看位置
      console.log('gonavi', this.warehouseInfo)
      if (this.warehouseInfo.location) {
        const lat = this.warehouseInfo.location.split(',')[1]
        const lng = this.warehouseInfo.location.split(',')[0]

        uni.openLocation({
          latitude: Number(lat), // 目标纬度
          longitude: Number(lng), // 目标经度
          name: this.warehouseInfo.name, // 位置名称
          address: this.warehouseInfo.address, // 详细地址
          success: () => console.log('跳转成功'),
          fail: err => {
            this.navigateToThirdPartyMap(Number(lat), Number(lng), this.warehouseInfo.name)
          },
        })
      } else {
        _this.uniShowToast('暂无该地区地址信息')
      }
    },
    // 弹出地图选择菜单
    navigateToThirdPartyMap(latitude, longitude, name) {
      uni.showActionSheet({
        itemList: ['高德地图', '百度地图', '腾讯地图'],
        success: res => {
          const mapApps = ['amap', 'baidu', 'qqmap']
          const schemeMap = {
            amap: `amapuri://route/plan/?dlat=${latitude}&dlon=${longitude}&dname=${name}&dev=0&t=0`,
            baidu: `baidumap://map/direction?destination=${latitude},${longitude}&name=${name}&mode=driving`,
            qqmap: `qqmap://map/routeplan?type=drive&to=${name}&tocoord=${latitude},${longitude}`,
          }
          const scheme = schemeMap[mapApps[res.tapIndex]]

          // 尝试打开地图APP
          uni.navigateTo({
            url: `/pages/webview/webview?url=${encodeURIComponent(scheme)}`,
            fail: () => {
              uni.showModal({
                content: '未安装该地图APP，是否下载？',
                success: confirmRes => {
                  if (confirmRes.confirm) {
                    const downloadUrl = {
                      amap: 'https://www.amap.com/',
                      baidu: 'https://map.baidu.com/',
                      qqmap: 'https://map.qq.com/',
                    }[mapApps[res.tapIndex]]
                    uni.setClipboardData({ data: downloadUrl })
                  }
                },
              })
            },
          })
        },
      })
    },
    handleTriggerSelect(index) {
      const _index = this.payList.findIndex(item => item.selected)
      if (!~_index) {
        this.payList[index].selected = true
      } else if (_index !== index) {
        this.payList[_index].selected = false
        this.payList[index].selected = true
      }
    },
    getDeliveryTime() {
      deliveryTimeList()
        .catch(err => {
          console.log('err', err.content)
          if (err.content) {
            this.deliverTimeList = err.content.map(item => {
              return { ...item, name: item.start_time + '-' + item.end_time }
            })
          }
          console.log('deliveryTimeList',this.deliverTimeList)
          // this.uniShowToast(err.msg)
        })
       
    },
    changeExpiration(e) {
      const index = e.target.value * 1
      this.deliverTime = this.deliverTimeList[index].name
      this.sendTimeId = this.deliverTimeList[index].id
    },
    handleDateTimeChange(value) {
      console.log('选择的日期时间:', value)
      this.deliverDate = value
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background-image: url('https://bw000.zjjqf.cn/file/000upload/image/shop_bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  /* display: flex;
  flex-direction: column; */
  overflow: hidden;
  &_scroll {
    position: fixed;
    width: 100vw;
    top: 180rpx; /* 搜索框高度 */
    left: 0;
    right: 0;
    bottom: 170rpx;
    z-index: 1;
  }
  &_content {
    margin: 20rpx;
    &_line {

      height: 1rpx;
      margin-top: 20rpx;
    }
    &_warehouse {
      display: flex;
      /* margin-top: 20rpx; */

      &_left {
        flex: 3;
        &_top {
          display: flex;
          /* align-items: center; */
          &_label {
            background: linear-gradient(to right, #77e399, #26bb55);
            color: white;
            font-size: 26rpx;
            padding: 5rpx 0;
            border-radius: 5rpx;
            width: 100rpx;
            text-align: center;
          }
          &_name {
            font-size: 30rpx;
            margin: 0 10rpx;
          }
        }
        &_address {
          font-size: 26rpx;
          color: #666;
          margin-top: 10rpx;
        }
      }
      &_right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }
    &_deliver {
      margin-top: 10rpx;
      &_row {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        &_left {
          font-size: 30rpx;
          font-weight: 500;
        }
        &_right {
          flex: 1;
          text-align: right;
          color: #26bb55;
        }
      }
    }
    &_title {
      width: 120rpx;
      margin-bottom: 20rpx;
    }
    &_item {
      display: flex;
      margin-top: 10rpx;
      &_pic {
        flex: 1;
        width: 96rpx;
        height: 96rpx;
        image {
          width: 96rpx;
          height: 96rpx;
          border-radius: 10rpx;
        }
      }
      &_title {
        font-weight: bold;
        margin: 0 10rpx;
        flex: 3;
        word-wrap: break-word; /*单词换行 */
        word-break: break-all; /*强制断行 */
      }
      &_right {
        flex: 1;
        text-align: right;
        &_num {
          color: #666;
          font-size: 24rpx;
        }
      }
    }
    &_coupon {
      display: flex;
      align-items: center;

      &_left {
        display: flex;
        align-items: center;
        flex: 1;
        image {
          width: 25rpx;
          margin-right: 10rpx;
        }
      }
      &_right {
        display: flex;
        align-items: center;
      }
    }
    &_info {
      font-size: 28rpx;
      image {
        width: 30rpx;
      }
      &_row {
        display: flex;
        align-items: center;
        &_label {
          width: 120rpx;
          margin-left: 20rpx;
        }
        &_input {
          border: none;
          /* height: 60rpx; */
          padding-left: 10rpx;
          border-radius: 10rpx;
          flex: 1;
        }
      }
    }
  }
  &_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    display: flex;
    padding: 20rpx 20rpx 50rpx 20rpx;
    box-shadow: 0px -1px 0px 0px rgba(104, 110, 120, 0.1);
    &_left {
      flex: 2;
      &_discount {
        display: flex;
        align-items: center;
        &_label {
          font-size: 28rpx;
          margin-right: 10rpx;
        }
        &_original {
          font-size: 26rpx;
          text-decoration: line-through;
          color: #666;
          margin-left: 20rpx;
        }
        &_des {
          color: #ff3348;
          font-size: 28rpx;
        }
      }
    }
    &_btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      background: linear-gradient(to left, #ff8f00, #ffb300);
      color: white;
    }
  }
  &_pop {
    &_content {
      background-image: url('https://bw000.zjjqf.cn/file/000upload/image/dialog_ware_bg.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 640rpx;
      height: 680rpx;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      &_close {
        width: 35rpx;
        position: absolute;
        right: 40rpx;
        top: 100rpx;
      }
      &_label {
        margin-top: 270rpx;
        font-size: 26rpx;
      }
      &_name {
        font-size: 48rpx;
        margin: 30rpx 0 20rpx 0;
      }
      &_distance {
        font-size: 24rpx;
        color: #666;
        letter-spacing: 1;
      }
      &_button {
        display: flex;
        margin: 60rpx 0 20rpx 0;
        &_left {
          width: 220rpx;
          height: 70rpx;
          line-height: 70rpx;
          font-size: 30rpx;
          border: 1rpx solid #d9d9d9;
          background-color: white;
          border-radius: 50rpx;
          margin-right: 20rpx;
        }
        &_right {
          width: 220rpx;
          height: 70rpx;
          line-height: 70rpx;
          font-size: 30rpx;
          color: white;
          margin-left: 20rpx;
          background: linear-gradient(to right, #77e399, #26bb55);
          border-radius: 50rpx;
        }
      }
      &_tip {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #666;
        margin-top: 20rpx;
      }
    }
  }
  &_pay-pop {
    background-color: white;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;

    &_close {
      width: 35rpx;
      margin-top: 20rpx;
    }
    &_title {
      align-self: center;
    }
    &_price {
      align-self: center;
      font-weight: bold;
      font-size: 48rpx;
      &_label {
        font-size: 28rpx;
      }
    }
    &_row {
      display: flex;
      align-items: center;
      padding: 30rpx 10rpx;
      border-bottom: 1rpx solid #edeff4;
      image {
        width: 40rpx;
        height: 40rpx;
      }
      &_title {
        flex: 1;
        margin: 0 10rpx;
      }
    }
    &_label {
      color: #666;
      font-size: 26rpx;
    }
    &_btn {
      width: 300rpx;
      margin: 30rpx auto 10rpx auto;
      background-color: #26bb55;
    }
  }
}
.checkbox {
  display: flex;
  justify-items: center;
  align-items: center;
  width: 28rpx;
  height: 28rpx;
  border: 2rpx solid #d9d9d9;
  border-radius: 50%;
  margin: 0 24rpx 0 8rpx;

  &.selected {
    border: 2rpx solid transparent;
    background: linear-gradient(to left, #ff8f00, #ffb300);
    color: white;
    .selected-icon {
      margin: 2rpx;
      color: #fff !important;
    }
  }
}
.order-bg {
  background-color: white;
  border-radius: 10rpx;
  padding: 30rpx 20rpx;
}
.line {
  height: 1rpx;
  background-color: #edeff4;
  margin: 30rpx 20rpx 20rpx;
}
.pay_checkbox {
  display: flex;
  justify-items: center;
  align-items: center;
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  margin: 0 24rpx 0 8rpx;

  &.selected {
    border: 2rpx solid transparent;
    background-color: #26bb55;
    color: white;
    .selected-icon {
      margin: 2rpx;
      color: #fff !important;
    }
  }
}
.border_none {
  border-bottom: none;
}
</style>
